// 让你封装路由表就是不能使用react-router-dom 自带的hooks ，useRoutes帮我们自动生成了路由，
// 现在自己使用函数递归的方式来动态的渲染路由
import routerCongfig from "./routerConfig";
import {BrowserRouter as Router , Routes, Route,Navigate} from "react-router-dom"
// 在这个文件中将routerconfig这个数组渲染成路由
// 在这个文件中要输出一个完整的路由给入口文件
import {Suspense} from "react"
let RouterView = ()=>{
    let renderRoutes = (routerCongfig)=>{
        return routerCongfig.map((item,index)=>{
            return item.path ?  <Route path={item.path} key={index} element={<item.element></item.element>}>
                 {
                     item.children && renderRoutes(item.children)
                 }
            </Route>:
            <Route path={item.from} key={index} element={<Navigate to={item.to}></Navigate>}></Route>
        })

    }
    return <Router>
                <Suspense fallback={<div>...loading</div>}>
                    <Routes>
                        {
                            renderRoutes(routerCongfig)
                        }
                    </Routes>
                   
                </Suspense>
           </Router>
}
export default RouterView